<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" th:href="@{backed/assets/images/favicon.png}">
  <title>Material Pro Admin Template - The Most Complete & Trusted Bootstrap 4 Admin Template</title>
  <!-- Bootstrap Core CSS -->
  <link th:href="@{backed/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
  <!-- Custom CSS -->
  <link th:href="@{backed/css/style.css}" rel="stylesheet">
  <link th:href="@{backed/js/layui.css}" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link th:href="@{backed/css/colors/blue.css}" id="theme" rel="stylesheet">
  <link th:href="@{backed/assets/plugins/element-ui/index.css}" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">

<div class="preloader">
  <svg class="circular" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
  </svg>
</div>

<div id="main-wrapper">

  <div th:replace="~{commons/commons::topbar}"></div>

  <div th:replace="~{commons/commons::sidebar}"></div>

  <div class="page-wrapper">

    <div class="container-fluid">

      <div class="row page-titles">
        <div class="col-md-5 col-8 align-self-center">
          <h3 class="text-themecolor m-b-0 m-t-0">歌曲模块</h3>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active">歌曲</li>
          </ol>
        </div>

      </div>

      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-block" id="songModel">
              <h3 class="card-title" style="display: inline-block; width: 60%">Song Model</h3>
              <el-input type="text" @blur="selectKeyWord" v-model:value="keyword" style="max-height: 28px;max-width: 200px"
                        placeholder="搜索..." lay-on="test-tips-color"></el-input>
              <br>
              <span class="card-subtitle addSong" style="cursor: pointer"
                    lay-on="test-page-title" @click="openAddSong">Add Song <code>.info</code>
              </span>

              <!--     添加歌曲信息弹框         -->
              <div id="openAddSong">
                <center>
                  <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                      <label class="layui-form-label">歌曲编号</label>
                      <div class="layui-input-block">
                        <input type="text" name="songid" v-model:value="addSongData.songId" autocomplete="off"
                               placeholder="请输入" lay-verify="required"
                               class="layui-input"/>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">歌曲名</label>
                      <div class="layui-input-block">
                        <input type="text" name="title" autocomplete="off" v-model:value="addSongData.name"
                               placeholder="请输入" lay-verify="required"
                               class="layui-input"/>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">作者</label>
                      <div class="layui-input-block">
                        <input type="text" name="author" v-model:value="addSongData.artist" placeholder="请输入"
                               lay-verify="required"
                               autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <input type="button" class="layui-btn" @click="addSong" value="确认"/>
                      <input type="button" class="layui-btn layui-btn-primary" @click="clearAddSong" value="重置">
                    </div>
                  </form>
                </center>
              </div>

              <!--     修改歌曲信息弹框         -->
              <div id="openUpdateSong">
                <center>
                  <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                      <label class="layui-form-label">歌曲编号</label>
                      <div class="layui-input-block">
                        <input type="text" name="songId" v-model:value="updateSongData.songId" autocomplete="off"
                               placeholder="请输入" lay-verify="required"
                               class="layui-input" disabled/>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">歌名</label>
                      <div class="layui-input-block">
                        <input type="text" name="title" autocomplete="off" v-model:value="updateSongData.name"
                               placeholder="请输入" lay-verify="required"
                               class="layui-input"/>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">作者</label>
                      <div class="layui-input-block">
                        <input type="text" name="author" v-model:value="updateSongData.artist"
                               placeholder="请输入"
                               lay-verify="required"
                               autocomplete="off" class="layui-input">
                      </div>
                    </div>

                    <div class="layui-form-item">
                      <input type="button" class="layui-btn" @click="updateSong" value="确认"/>
                      <input type="button" class="layui-btn layui-btn-primary" @click="clearUpdateSong" value="重置">
                    </div>
                  </form>
                </center>
              </div>

              <div class="table-responsive">
                <table class="table">
                  <thead>
                  <tr>
                    <th>#</th>
                    <th>songId</th>
                    <th>name</th>
                    <th>artist</th>
                    <th>cover</th>
                    <th>url</th>
                    <th>lrc</th>
                    <th>Operate &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;<span style="cursor: pointer" >delete</span></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,index) in dataList" :key="item.id">
                    <td>{{ index + 1}}</td>  <!-- 保持编号的自增 -->
                    <td>{{ item.songId}}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.artist }}</td>
                    <td><img style="width: 50px;height: 50px;" :src="item.cover" alt="cover"></td>
                    <td>{{split(item.url)}}</td>
                    <td>{{split(item.lrc)}}</td>
                    <td>
                      <button class="layui-btn layui-btn-normal" lay-on="test-page-title"
                              @click="openUpdateSong(dataList[index])">修改
                      </button>
                      <button class="layui-btn layui-btn-danger" @click="deleteSong(dataList[index])">删除</button>
                    </td>
                  </tr>
                  </tbody>
                </table>
                <!--                           @size-change="handleSizeChange"-->
                <el-pagination @current-change="handleCurrentChange" :current-page=1
                               :page-size="page.pageSize" layout="total, prev, pager, next, jumper"
                               :total="page.count">
                </el-pagination>

              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div th:replace="commons/commons::footer"></div>

  </div>

</div>
<script th:src="@{backed/assets/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script th:src="@{backed/assets/plugins/bootstrap/js/tether.min.js}"></script>
<script th:src="@{backed/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script th:src="@{backed/js/jquery.slimscroll.js}"></script>
<!--Wave Effects -->
<script th:src="@{backed/js/waves.js}"></script>
<!--Menu sidebar -->
<script th:src="@{backed/js/sidebarmenu.js}"></script>
<!--stickey kit -->
<script th:src="@{backed/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js}"></script>
<!--Custom JavaScript -->
<script th:src="@{backed/js/custom.min.js}"></script>
<script th:src="@{backed/js/vue.js}"></script>
<script th:src="@{backed/js/layui.js}"></script>
<script th:src="@{backed/assets/plugins/element-ui/index.js}"></script>
<script th:src="@{backed/js/content/icon-material.js}"></script>
<script th:replace="~{commons/commons::topbar_vue}"></script>
<script th:inline="javascript">
  var addSong_layui;
  var updateSong_layui;

  const songModel = new Vue({
    el: "#songModel",
    data: {
      //1、查询数据渲染
      dataList: null,

      //2、用户添加数据
      addSongData: {
        songId: "",
        name: "",
        artist: "",
      },

      //3、用户添加数据
      updateSongData: {
        songId: "",
        name: "",
        artist: "",
      },

      //4、分页参数
      page: {
        //4.1页码
        pageIndex: 0,
        //4.2每页显示条数
        pageSize: 8, //设置每页显示条数
        //4.3分页查询条件
        song: {
          songId: "",
          name: "",
          artist: ""
        },
        //4.4记录总条数
        count: 0,
      },
      //5、查询关键字
      keyword: ''
    },
    mounted: function () {
      //加载页面时执行的
      //弹框隐藏
      $("#openAddSong").hide();
      $("#openUpdateSong").hide();
      //数据渲染
      this.pageSelection(this.page)
    },

    methods: {

      //1、请求数据接口
      pageSelection(data) {
        let that = this;
        pageSelectApi(data).done(function (res) {
          if (res.code === 200) {
            console.log(res.data)
            songModel.dataList = res.data.list;
            songModel.page.count = res.data.count;
          } else {
            //没查询到
            that.$message({
              message: '未找到记录',
              type: 'warning',
              center: true
            })
          }
        })
      },

      //2 当前页码变化发送事件，请求接口数据
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page.pageIndex = val - 1;
        //发送请求
        this.pageSelection(this.page)
      },

      //3、搜索框移出事件，请求接口数据
      selectKeyWord() {
        let song=this.page.song;
        this.page.pageIndex=0;
        song.songId = this.keyword;
        song.name = this.keyword;
        song.artist = this.keyword;
        this.pageSelection(this.page)
      },

      //4-1、
      openAddSong() {
        layui.util.on('lay-on', {
          'test-page-title': function () {
            addSong_layui = layer.open({
              type: 1,
              area: ['440px', '300px'], // 宽高
              title: 'Add Song', // 不显示标题栏
              closeBtn: 0,
              shadeClose: true, // 点击遮罩关闭层
              content: $('#openAddSong'),
            });
          },
        })
      },

      //4-2 清除弹框内容
      clearAddSong() {
        let addSongData = this.addSongData
        addSongData.songId = "";
        addSongData.name = "";
        addSongData.artist = "";
      },

      //4-3 添加信息发送
      addSong() {
        let that = this;
        //表单验证

        addSongApi(that.addSongData).done(function (res) {
            if (res.code === 200) {
              //关闭弹框
              layer.close(addSong_layui);
              that.clearAddSong();
              //提示信息
              that.$message({
                message: '歌曲成功添加',
                type: 'success',
                center: true
              });
              //刷新界面
              that.pageSelection(that.page)
            } else {
              that.$message({
                message: '网络繁忙',
                type: 'warning',
                center: true
              });
            }
          })

      },

      //5、修改弹框被打开、回显账号信息 data是对应的数据
      openUpdateSong(data) {
        console.log(data)
        let that = this;
        //5.1 打开弹框
        layui.util.on('lay-on', {
          'test-page-title': function () {
            updateSong_layui = layer.open({
              type: 1,
              area: ['440px', '300px'], // 宽高
              title: 'Update Song', // 不显示标题栏
              closeBtn: 0,
              shadeClose: true, // 点击遮罩关闭层
              content: $('#openUpdateSong'),
            });
          },
        })
        //5.2 数据渲染到弹框
        that.updateSongData.songId = data.songId;
        that.updateSongData.name= data.name;
        that.updateSongData.artist = data.artist;

      },

      //5-1、点击重置
      clearUpdateSong() {
        let up_data = this.updateSongData;
        up_data.name = "";
        up_data.artist = "";
      },

      //5-2、修改信息发送
      updateSong() {
        let that = this;

          updateSongApi(that.updateSongData).done(function (res) {
            if (res.code === 200) {
              //5-2-1关闭弹框
              layer.close(updateSong_layui);
              //5-2-2清空内容
              that.updateSongData.songId = "";
              that.clearUpdateSong();
              //5-2-3提示信息
              that.$message({
                message: '歌曲成功修改',
                type: 'success',
                center: true
              });
              //5-2-4刷新界面
              that.pageSelection(that.page)
            }else {
              that.$message({
                message: '网络繁忙',
                type: 'warning',
                center: true
              });
            }
          })
      },

      //6、删除用户
      deleteSong(data) {
        let that=this;
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '是否删除歌曲: '),
            h('i', { style: 'color: teal' }, data.title)
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {

              //调用删除接口
              deleteSong(data.id).done(function (res){
                if(res.code === 200){
                  instance.confirmButtonLoading = true;
                  instance.confirmButtonText = '执行中...';
                  setTimeout(() => {
                    done();
                    setTimeout(() => {
                      instance.confirmButtonLoading = false;
                    }, 300);
                  }, 600);
                }else{
                  that.$message({
                    type: 'warning',
                    message: '网络繁忙'
                  });
                }
              })
            } else {
              done();
            }
          }
        }).then(action => {
          //刷新记录
          that.clearT(that)
          that.pageSelection(that.page)
          that.$message({
            type: 'success',
            message: '成功删除一条记录！'
          });
        });
      },


      //8、截断
      split(a){
        return a !== null && a.length > 39 ? a.split("?")[1] : a  ;
      },

      //9、清空条件
      clearT(that){
        that.page.pageIndex=0;
        that.page.song.songId="";
        that.page.song.name="";
        that.page.song.artist="";
      }

    }
  })
  //搜索框小提示
  layui.use(function () {
    var layer = layui.layer;
    var util = layui.util;
    // 事件
    util.on('lay-on', {
      'test-tips-color': function () {
        layer.tips('失去焦点自动检索', this, {
          tips: [1, '#1e9fff']
        });
      },
    })
  });
</script>
</body>

</html>
<script setup lang="ts">
</script>